<template>
  <div class="box shadow-sm border rounded bg-white mb-3">
    <div class="box-title border-bottom p-3">
      <h6 class="m-0">留言板</h6>
    </div>
    <div class="box-body p-3 border-bottom" v-if="words.length===0">
      <el-empty description="您暂无留言,快让好友来留言吧！" image="http://localhost:3001/file/notalk.png" :image-size="100"></el-empty>
    </div>
    <div v-else>
      <div class="box-body p-3 border-bottom" v-for="(item,index) in words" :key="index" >
        <div class="d-flex align-items-top job-item-header pb-2">
          <div class="mr-2">
            <p class="font-weight-bold text-dark mb-0">{{item.user_name}}</p>
            <div class="text-truncate text-primary small">{{$moment(item.create_time).format("lll")}}</div>
            <!-- <div class="small text-gray-500">{{item.create_time}} </div> -->
          </div>
          <img class="img-fluid ml-auto mb-auto  rounded-circle" :src="item.user_header" alt="">
        </div>
        <p class="mb-0 ml-1">{{item.message}}</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      words: [],
      getLeaveWordsStore: this.newStore(),
    };
  },
  created() {
    this.spost(this.getLeaveWordsStore, "/getLeaveWords", { id: this.$store.state.userInfo.userid }).then(
      (res) => {
        this.words = res.d.data;
      },
    );
  },
};
</script>

<style scoped lang="scss">

</style>
